<!--六道之众——行念明细-->
<template>
    <div>
        <Row style="margin-top: 10px">
            <i-col span="2" style="margin-left: 5px;">
                <Row>
                    <Tooltip content="道友，点我返回哦！" placement="right-start">
                        <svg  @click="svgClick" class="thinkDeed-left-icon">
                            <use xlink:href="#icon-daxiao1"></use>
                        </svg>
                    </Tooltip>
                </Row>
                <Row class="info-row-public-arrt" style="color: #c679d4;">世数：{{this.info.lifeTime}}</Row>
                <Row class="info-row-public-arrt" style="color: black;">姓名：{{this.info.name}}</Row>
                <Row class="info-row-public-arrt" style="color: #cc4b4b;">身份：{{this.info.idCardNo}}</Row>
                <Row class="info-row-public-arrt" style="color: #45b77d;">总功：{{this.info.merits}}</Row>
                <Row class="info-row-public-arrt" style="color: #7f7d3c;">总过：{{this.info.fault}}</Row>
                <Row class="info-row-public-arrt" style="color: #ec9e66;">和：{{this.info.sum}}</Row>
                <Row class="info-row-public-arrt" style="color: #a59e9e;">寿：{{this.info.age}}</Row>
            </i-col>
            <i-col span="21">
                <Row style="line-height: 0">
                    <i-col span="4">
                        <DatePicker  confirm split-panels @on-change="datePickerChangeHandle" v-model="datePickerValue" format="yyyyMMdd" type="daterange" placement="bottom-end" placeholder="选择日期、可为空..."></DatePicker>
                    </i-col>
                    <i-col span="6">
                        <Input v-model="searchInfo" @on-search="onSearchHandle" @ search enter-button placeholder="事类、事体、地址、备注..." />
                    </i-col>
                </Row>
                <Row>
                    <DeedTableComp :columns="columns" :page="page" :pending="pending" @pageChange="pageChange" @pageSizeChange="pageSizeChange"></DeedTableComp>
                </Row>
                <Row ref="footer" type="flex" justify="center" align="top" class="code-row-bg"> 2020 - 2021 &copy; DATonG </Row>
            </i-col>
            <i-col span="1">
            </i-col>
        </Row>
    </div>
</template>

<script lang="tsx">
import { Component } from "vue-property-decorator";
import _ from 'lodash';
import { THINK_DEED, PAGE, SEARCH } from '@/store/modules/crud/keys'
import { INFO as appINFO } from '@/store/modules/app/keys'
import TableMixin from '@/mixin/views/table';
import DeedTableComp from '@/components/TableComponent.vue';

@Component({
    components: { DeedTableComp }
})
export default class ThinkDeedModal extends TableMixin {
    columns=[
        { title: '日时' , minWidth: 150, key: 'currentDateTime', render: this.renderFn},
        { title: '事类' , minWidth: 100, key: 'enumDeedType', render: this.renderFn},
        { title: '事体' , minWidth: 200, key: 'deed', render: this.renderFn},
        { title: '功' , minWidth: 80, key: 'merits', render: this.renderFn},
        { title: '过' , minWidth: 100, key: 'fault', render: this.renderFn},
        { title: '地' , minWidth: 150, key: 'place', render: this.renderFn},
        { title: '备注' , minWidth: 100, key: 'remarks', render: this.renderFn},
    ]
    btnLoading: boolean = false;
    btnShow: boolean = true;
    searchInfo = "";
    datePickerValue: Array<string>=[];

    get _name(){
        return THINK_DEED
    }
    renderFn(h: any, record: any){
        switch (record.column.key) {
            case 'sid':
                return null
            default:
                return <span>{_.get(record.row, record.column.key)}</span>
        }
    }
    //搜索框Enter或搜索点击事件
    onSearchHandle(e: any){
        let dateSeaInf = "";
        if(this.datePickerValue.length === 2){
            dateSeaInf = this.datePickerValue[0] + "|" + this.datePickerValue[1];
        }
        this.$store.commit(SEARCH,{name: this._name, params: {page: 0, searchInfo: dateSeaInf + "|" + e, id: this.info.id}});
        this.$store.dispatch(PAGE,{name: this._name});
    }
    datePickerChangeHandle(e: Array<string>){
        this.datePickerValue = e;
        let dateSeaInf = "";
        if(e.length == 2){
            dateSeaInf = e[0] + "|" + e[1]
        }
        this.$store.commit(SEARCH,{name: this._name, params: {page: 0, searchInfo: dateSeaInf + "|" + this.searchInfo, id: this.info.id}});
        this.$store.dispatch(PAGE,{name: this._name});
    }
    //图标点击事件
    svgClick(){
        this.$store.commit(appINFO,{ key: 'menuLiudaoName', value: '六道众生' });
        this.$router.push({name: "liudao", replace: true});
    }
    mounted (){
        const info = this.state.info;
        if(info.id != null && info.id != undefined && info.id != ""){
            window.sessionStorage.setItem("info", JSON.stringify(info));
        }
        window.addEventListener('load', () => this.loadFn());
    }
    created(){
        this.$store.commit(appINFO,{ key: 'menuLiudaoName', value: '行念明细' });
        this.$store.commit(SEARCH, {name: this._name, key: "id", value: this.info.id});
        this.$store.dispatch(PAGE, { name: this._name });
    }
    beforeDestroy(){
        window.removeEventListener('load', () => this.loadFn())
    }
    get info(){
        const info = this.state.info;
        if(info.id == null || info.id == undefined || info.id == ''){
            const info_session = window.sessionStorage.getItem("info");
            if(info_session != null){
                return JSON.parse(info_session)
            }
        }
        return info
    }
    loadFn(){
        if (this.$route.path !== '/') {
            this.$router.replace('/thinkDeed') // 切换到首页
        }
    }
}
</script>

<style scoped>
.thinkDeed-left-icon {
    height: 32px;
    width: 32px;
    cursor: pointer;
}
.info-row-public-arrt{
    overflow: hidden;
    height: 24px;
    white-space: nowrap;
    margin: 10px 0px;
}
</style>
